<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - Chit-chat</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background-color: #f0f2f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .nav {
            height: 50px;
            background-color: #165DFF;
            color: white;
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            padding-left: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .login-container {
            width: 100%;
            height: calc(100% - 50px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .login-dialog {
            width: 100%;
            max-width: 400px;
            background-color: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease;
        }

        .login-dialog:hover {
            transform: translateY(-5px);
        }

        .login-dialog h3 {
            text-align: center;
            color: #1D2129;
            margin-bottom: 30px;
            font-size: 24px;
            position: relative;
            padding-bottom: 15px;
        }

        .login-dialog h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background-color: #165DFF;
            border-radius: 3px;
        }

        .row {
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            border: 1px solid #D9D9D9;
            border-radius: 8px;
            padding: 0 15px;
            transition: all 0.3s ease;
        }

        .input-group:focus-within {
            border-color: #165DFF;
            box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
        }

        .input-group i {
            color: #86909C;
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        #username, #password {
            width: 100%;
            height: 50px;
            font-size: 16px;
            border: none;
            outline: none;
            background: transparent;
            padding: 0;
        }

        .row.submit-row {
            margin-top: 30px;
        }

        #submit {
            width: 100%;
            height: 50px;
            background-color: #165DFF;
            color: white;
            border: none;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        #submit:hover {
            background-color: #0E42D2;
        }

        #submit:active {
            background-color: #0A34A1;
        }

        #submit.loading {
            background-color: #86909C;
            position: relative;
            cursor: not-allowed;
        }

        #submit.loading:after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .error-message {
            color: #F53F3F;
            font-size: 14px;
            margin-top: 5px;
            height: 20px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        /* 响应式调整 */
        @media (max-width: 480px) {
            .login-dialog {
                padding: 20px 15px;
            }

            .row {
                margin-bottom: 15px;
            }
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    <i class="fas fa-comment-alt"></i> Chit-chat
</div>
<!-- 主窗口区 -->
<div class="login-container">
    <div class="login-dialog">
        <h3>欢迎回来</h3>
        <div class="row">
            <div class="input-group">
                <i class="fas fa-user"></i>
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="error-message" id="usernameError">请输入用户名</div>
        </div>
        <div class="row">
            <div class="input-group">
                <i class="fas fa-lock"></i>
                <input type="password" id="password" placeholder="请输入密码">
            </div>
            <div class="error-message" id="passwordError">请输入密码</div>
        </div>
        <div class="row submit-row">
            <button id="submit" onclick="login()">登录</button>
        </div>
    </div>
</div>

<!-- 引入 jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- 实现前后端交互的逻辑 -->
<script>
    function login() {
        // 清除之前的错误提示
        $('.error-message').removeClass('show');

        const username = $("#username").val().trim();
        const password = $("#password").val().trim();
        let isValid = true;

        // 验证用户名
        if (username === "") {
            $('#usernameError').addClass('show');
            isValid = false;
        }

        // 验证密码
        if (password === "") {
            $('#passwordError').addClass('show');
            isValid = false;
        }

        if (!isValid) {
            return;
        }

        // 显示加载状态
        const $submitBtn = $('#submit');
        $submitBtn.addClass('loading').text('');

        $.ajax({
            type: "post",
            url: "/user/login",
            data: {
                username: username,
                password: password
            },
            success: function (result) {
                // 恢复按钮状态
                $submitBtn.removeClass('loading').text('登录');

                if (result && result.id > 0) {
                    // 登录成功动画
                    $submitBtn.css('background-color', '#00B42A').text('登录成功');
                    setTimeout(() => {
                        location.href = "client.html";
                    }, 800);
                } else if (result && result.id == -1) {
                    showError('该用户已上线，请更换用户名登录');
                } else {
                    showError('登录失败，用户名或密码错误');
                }
            },
            error: function() {
                // 恢复按钮状态
                $submitBtn.removeClass('loading').text('登录');
                showError('网络错误，请稍后重试');
            }
        });
    }

    // 显示错误提示
    function showError(message) {
        // 先隐藏所有错误
        $('.error-message').removeClass('show');
        // 创建临时错误提示
        const $tempError = $('<div class="error-message show" style="text-align:center;">' + message + '</div>');
        $('.submit-row').after($tempError);
        // 3秒后自动消失
        setTimeout(() => {
            $tempError.remove();
        }, 3000);
    }

    // 为输入框添加回车键提交功能
    $('#username, #password').keypress(function(e) {
        if (e.which === 13) {
            login();
        }
    });
</script>
</body>
</html>
